Floating Boxes > Setting up floating boxes
 		><

Setting up floating boxes


Adobe GoLive lets you add floating boxes to your Web page by dragging the Floating Box icon from the Objects palette. You can position your floating box accurately using the Floating Box Inspector or a layout grid that you define in the Grid Settings dialog box. You can add any valid HTML element, including text, images, rules, and any other basic or advanced icons from the Objects palette to your floating box. You can format text and assign attributes in the usual way.

To set up a floating box:

1 Drag the Floating Box icon from the Basic tab () of the Objects palette into the document window, or double-click the icon in the Objects palette.


The small yellow icon labeled SB at the upper left corner of the floating box is the floating box marker. When you change the position of the box, this icon remains at the original point of insertion. You can click this icon to select the floating box unless it is underneath another floating box.


2 Click the border of the floating box to open the Floating Box Inspector.

3 Enter a name for the floating box in the Name text box. If you are using several floating boxes within your animation, using unique names makes them easier to identify. (Make sure not to name them with just a number.) If you don't specify a name, Adobe GoLive names all subsequent floating boxes layer, layer2, layer3, and so on.

4 To move a floating box, drag it by its border, or enter exact coordinates (in pixels from the upper left corner of the document window) in the Left and Top text boxes. For additional information on positioning floating boxes accurately using the layout grid and the Transform and Align palettes, see Positioning floating boxes.

5 To resize the floating box, enter the desired size in the Width and Height text boxes, or drag any of the resize handles. Choose the units of measurement from the adjacent pop-up menus in the Inspector:
  • Auto to size the box to its contents.
  • Percent to size the box to that percentage of its original size.

    • Note: An internal Netscape bug causes Netscape to resize the width of a floating box to the width of its contents.

    6 Enter a value for the z-index of the floating box in the Depth text box if you plan to add more overlapping boxes. Use the z-index (Depth) 1 for the lowest box, 2 for the next box in the stack, and so on.

    Assign z-indices whenever you place overlapping floating boxes on the same page to avoid problems when the browser tries to display them.


    A. The lowest box has a z-index of 1. B. The box in the middle has a z-index of 2. C. The box at the top has a z-index of 3.

    7 If desired, choose a background color for the floating box using the procedure described in Working with color. You can also add a background image.

    To add text to a floating box:

    1 Click in the floating box. The background of the box turns white unless you have selected a background color or image.

    2 Type in the required text.

    3 Select the text, and apply formatting using the buttons in the Text toolbar or the text formatting commands from the Type menu. (See Formatting text using physical and structural styles.)

    Note: If you embed a floating box in another floating box, the embedded box will inherit any CSS information from the parent floating box.

    To add an image or other object to a floating box:

    1 Do one of the following:
  • Drag any object from the Objects palette directly to the content area of the floating box.
  • Click inside the floating box, and then double-click the desired item in the Objects palette.

    • 2 Set up an item or placeholder as desired--for example, use the Point and Shoot button to link an image placeholder with an image file in the site window.

    Note: Netscape Navigator and Internet Explorer may have problems with floating boxes that contain tables or layout grids. Also, an intermittent bug in Netscape 4.0 browsers may cause the content of an animated floating box to temporarily disappear, especially if the content is an image button. A simple workaround is to click the content area and insert a nonbreaking space, press Alt-space (Windows) or Option-space (Mac OS), before the image button.

    To display a background image in a floating box:

    1 With the floating box selected, select the BGImage option in the Floating Box Inspector. An Empty Reference entry appears in the adjacent box, prompting you to select an image.

    2 Use the Point and Shoot button () to link to an image file in the site window, type in the image filename (including the relative path to the folder), or click the Browse button () to select an image in the subsequent file selection dialog.

    Note: Avoid using a background image alone in a floating box. In Netscape Communicator, the background image may not display.

    To change a floating box background from transparent to an opaque color:

    1 With the floating box selected, click the color field in the Floating Box Inspector to open the Color palette.

    2 Select a color from any tab of the Color palette (preferably a Web-safe color), and drag it from the preview pane of the Color palette to the color field in the Floating Box Inspector.

    Floating Boxes > Setting up floating boxes